window.onload=function(){
  var myInput=document.getElementsByClassName("myInput");
  var out =document.getElementsByClassName("out");
  var list=document.getElementsByClassName("list");
    out[0].addEventListener('click', function () {
        // alert("aaa");
        if(myInput[0].value){
            // console.log("aaa");
            
            $.ajax({
                url: 'http://api.brhsm.cn/lt.php?msg='+myInput[0].value,
                dataType: "json",
                type: "get",
                success: function (data) {
                    // console.log(data);
    
                    //      <li class='right'>
                    //         <img src='img/img2.jpg'/>
                    //         <p>是的呢dsssssssssss</p>
                    //     </li>
                    //     <li class="left">
                    //         <img src="img/img1.jpg">
                    //         <p>我就知道你会回来</p>
                    //     </li>
    
                    //创建class为right的li
                    var lir=document.createElement("li");
                    lir.innerHTML="<img src='img/img2.jpg'/>"+
                                "<p>"+myInput[0].value+"</p>";
    
                    lir.className="right";
    
                    list[0].appendChild(lir);
    
                    //创建class为left的li
                    var lil=document.createElement("li");
                    lil.innerHTML= "<img src='img/img1.jpg'/>"+
                                 "<p>"+data.text+"</p>";
                                 lil.className="left"; 
                    list[0].appendChild(lil);
                   
                    //清空输入框
                    myInput[0].value="";

                    list[0].scrollTop=100+"px";
                    //竖向滚动条置底
                    window.scrollTo(0,document.body.scrollHeight);
                    

                },
                error: function (e) {
                    console.log(e);
                }
            });
           
        }
        
    });
  
}